<template>
    <div> Vuex </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
    setup() {
        const store = useStore()
        // state & getters
        const appId = computed(() => store.state.appId)
        const toDo = computed(() => store.getters.toDo)
        // mutation
        const increment = store.commit('increment')
        // action
        const asyncIncrement = store.dispatch('increment')
        // 
        console.log(store)
        return {
            appId,
            toDo,
            increment,
            asyncIncrement
        }
    },
})
</script>
